<script setup lang="ts">
import {extname} from "node:path";
import SvgFolder from "@/components/svg/SvgFolder.vue";
import SvgAudio from "@/components/svg/SvgAudio.vue";
import SvgVideo from "@/components/svg/SvgVideo.vue";
import {isAudioFormat, isImageFormat, isVideoFormat, isZipFormat} from "@/utils/reg";
import {FileEntryWithType} from "@/utils/client";

interface Props {
  item: FileEntryWithType
}

defineProps<Props>()

/**
 * 判断后缀
 * @param list
 * @param item
 */
const onSuffix = (list: string[], item: FileEntryWithType) => {
  return list.map(v => v.toLowerCase()).includes(extname(item.filename).toLowerCase())
}
</script>

<template>
  <SvgFolder class="icon" v-if="item.attrs.isDirectory()"/>
  <img v-else-if="isImageFormat(item.filename)"
       src="@/assets/icons/img.png"
       class="icon"
       alt="img"/>
  <img v-else-if="isZipFormat(item.filename)"
       src="@/assets/icons/zip.png"
       class="icon"
       alt="zip"/>
  <SvgAudio v-else-if="isAudioFormat(item.filename)" class="icon"/>
  <SvgVideo v-else-if="isVideoFormat(item.filename)" class="icon"/>
  <img v-else-if="onSuffix(['.txt', '.log'], item)"
       src="@/assets/icons/txt.png"
       class="icon"
       alt="txt"/>
  <img v-else-if="onSuffix(['.word', '.docx'], item)"
       src="@/assets/icons/word.png"
       class="icon"
       alt="word"/>
  <img v-else-if="onSuffix(['.html'], item)"
       src="@/assets/icons/html.png"
       class="icon"
       alt="html"/>
  <img v-else-if="onSuffix(['.config', '.conf'], item)"
       src="@/assets/icons/config.png"
       class="icon"
       alt="config"/>
  <img v-else-if="onSuffix(['.excel', '.xlsx'], item)"
       src="@/assets/icons/excel.png"
       class="icon"
       alt="excel"/>
  <img v-else-if="onSuffix(['.config', '.conf'], item)"
       src="@/assets/icons/config.png"
       class="icon"
       alt="config"/>
  <img v-else-if="onSuffix(['.gif'], item)"
       src="@/assets/icons/gif.png"
       class="icon"
       alt="gif"/>
  <img v-else-if="onSuffix(['.ppt', '.pptx'], item)"
       src="@/assets/icons/ppt.png"
       class="icon"
       alt="ppt"/>
  <img v-else-if="onSuffix(['.woff', '.ttf'], item)"
       src="@/assets/icons/ttf.png"
       class="icon"
       alt="ttf"/>
  <img v-else-if="onSuffix(['.pdf'], item)"
       src="@/assets/icons/pdf.png"
       class="icon"
       alt="pdf"/>
  <img v-else-if="onSuffix(['.js'], item)"
       src="@/assets/icons/js.png"
       class="icon"
       alt="js"/>
  <img v-else-if="onSuffix(['.css'], item)"
       src="@/assets/icons/css.png"
       class="icon"
       alt="css"/>
  <img v-else-if="onSuffix(['.html'], item)"
       src="@/assets/icons/html.png"
       class="icon"
       alt="html"/>
  <img v-else-if="onSuffix(['.svg'], item)"
       src="@/assets/icons/svg.png"
       class="icon"
       alt="svg"/>
  <img v-else-if="onSuffix(['.json'], item)"
       src="@/assets/icons/JSON.png"
       class="icon"
       alt="JSON"/>
  <img v-else-if="onSuffix(['.xml'], item)"
       src="@/assets/icons/xml.png"
       class="icon"
       alt="xml"/>
  <img v-else-if="onSuffix(['.dll'], item)"
       src="@/assets/icons/dll.png"
       class="icon"
       alt="dll"/>
  <img v-else-if="onSuffix(['.exe'], item)"
       src="@/assets/icons/exe.png"
       class="icon"
       alt="exe"/>
  <img v-else-if="onSuffix(['.pdb'], item)"
       src="@/assets/icons/pdb.png"
       class="icon"
       alt="pdb"/>
  <img v-else
       src="@/assets/icons/default.png"
       class="icon"
       alt="default"/>
</template>
